<template>
  <div class="app-container">
    <!-- 对话框(添加 / 修改) -->
    <el-form
      ref="queryForm"
      :model="queryForm"
      :rules="rules"
      label-width="80px"
      class="box-card"
    >
      <el-form-item label="保养人员" prop="userId">
        <el-select
          v-model="queryForm.userId"
          @change="changeUser"
          placeholder="请选择保养人员"
          clearable
          size="small"
        >
          <el-option
            v-for="item in users"
            :key="item.id"
            :label="item.nickname"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="保养设备" prop="equipmentId">
        <el-select
          v-model="queryForm.equipmentId"
          placeholder="请选择设备"
          clearable
          size="small"
        >
          <el-option
            v-for="item in equipmentOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="保养标准" prop="standardId">
        <el-select
          v-model="queryForm.standardId"
          @change="changeStandard"
          placeholder="请选择保养标准"
          clearable
          size="small"
        >
          <el-option
            v-for="item in standardOptions"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提 交</el-button>
      </el-form-item>
    </el-form>
    <el-card class="box-card" v-if="open" v-loading="loading">
      <div slot="header" class="clearfix">
        <span class="el-icon-document">保养标准</span>
      </div>
      <el-form ref="form" :model="form" v-if="open" label-width="80px">
        <el-form-item label="标准名称" prop="name">
          {{ form.name }}
        </el-form-item>
        <el-form-item label="所属部门" prop="deptId">
          {{ deptNameFormat2(form.deptId) }}
        </el-form-item>
        <el-form-item label="标准说明" prop="remarks">
          {{ form.remarks }}
        </el-form-item>
        <el-form-item label="适用设备" prop="equipmentIds">
          <el-tag
            :disable-transitions="true"
            :key="index"
            v-for="(equipment, index) in form.equipmentIds"
            :index="index"
          >
            {{ eqNameFormat(equipment) }}
          </el-tag>
        </el-form-item>
        <el-form-item label="使用类别" prop="typeIds">
          <el-tag
            :disable-transitions="true"
            :key="index"
            v-for="(equipment, index) in form.typeIds"
            :index="index"
          >
            {{ typeNameFormat(equipment) }}
          </el-tag>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="form.status" />
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="hover" class="box-card" v-if="open" v-loading="loading">
      <div slot="header" class="clearfix">
        <span>保养项目</span>
      </div>
      <el-form ref="form" :model="form" v-if="open" label-width="80px">
        <el-form-item
          label-width="0"
          v-for="(item, index) in form.maintainStandardItem"
          :key="index"
        >
          <el-row :gutter="10">
            <el-col :span="8">
              <el-form-item
                label="模块"
                :prop="'maintainStandardItem.' + index + '.module'"
              >
                {{ item.module }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="编号"
                :prop="'maintainStandardItem.' + index + '.number'"
              >
                {{ item.number }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="保养类型"
                :prop="'maintainStandardItem.' + index + '.maintainType'"
              >
                <dict-tag
                  :type="DICT_TYPE.COMMON_TIME_TYPE"
                  :value="item.maintainType"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="10">
            <el-col :span="24">
              <el-form-item
                label="项目"
                :prop="'maintainStandardItem.' + index + '.program'"
              >
                {{ item.program }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item
                label="内容"
                :prop="'maintainStandardItem.' + index + '.content'"
              >
                {{ item.content }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="类型"
                :prop="'maintainStandardItem.' + index + '.type'"
              >
                <dict-tag
                  :type="DICT_TYPE.EMS_MAINTAINSTANDARD_ITEM_TYPE"
                  :value="item.type"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="上限"
                :prop="'maintainStandardItem.' + index + '.upperLimit'"
              >
                {{ item.upperLimit }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="下限"
                :prop="'maintainStandardItem.' + index + '.lowerLimit'"
              >
                {{ item.lowerLimit }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item
                label="可选项"
                :prop="'maintainStandardItem.' + index + '.options'"
              >
                {{ item.options }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="正常选项"
                :prop="'maintainStandardItem.' + index + '.normalOptions'"
              >
                {{ item.normalOptions }}
              </el-form-item>
            </el-col>
          </el-row>
          <div v-if="taskVisable">
            <el-row>
              <el-col :span="8">
                <el-form-item
                  label="结果"
                  :prop="'maintainStandardItem.' + index + '.result'"
                >
                  <el-input v-model="item.result" placeholder="请输入结果" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="是否异常"
                  :prop="'maintainStandardItem.' + index + '.exception'"
                >
                  <el-select v-model="item.exception" placeholder="是否异常">
                    <el-option
                      v-for="dict in booleanDictDatas"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item
                  label="是否处理"
                  :prop="'maintainStandardItem.' + index + '.handleException'"
                >
                  <el-select
                    v-model="item.handleException"
                    placeholder="是否异常"
                  >
                    <el-option
                      v-for="dict in booleanDictDatas"
                      :key="dict.value"
                      :label="dict.label"
                      :value="parseInt(dict.value)"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="处理措施"
                  :prop="'maintainStandardItem.' + index + '.measure'"
                >
                  <el-input
                    v-model="item.measure"
                    placeholder="请输入处理措施"
                    type="textarea"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item
                  label="图片"
                  :prop="'maintainStandardItem.' + index + '.photo'"
                >
                  <el-input v-model="item.photo" placeholder="请输入图片URL" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { createMaintainTask } from "@/api/ems/maintainTask";
import { listSimpleUsers, getUserProfile } from "@/api/system/user";
import { listSimpleDepts, listDept } from "@/api/system/dept";
import { listSimpleEqTypes } from "@/api/ems/eqType";
import { listSimpleEquipments } from "@/api/ems/equipment";
import {
  listSimpleMaintainStandards,
  getMaintainStandard,
} from "@/api/ems/maintainStandard";
import { getDictDatas, DICT_TYPE } from "@/utils/dict";

export default {
  name: "TaskCreate",
  components: {},
  data() {
    return {
      // 表单参数
      queryForm: {},
      form: {},
      // 表单校验
      rules: {
        userId: [
          { required: true, message: "用户不能为空", trigger: "change" },
        ],
        equipmentId: [
          { required: true, message: "设备不能为空", trigger: "change" },
        ],
        standardId: [
          { required: true, message: "保养标准不能为空", trigger: "blur" },
        ],
      },
      equipmentOptions: [],
      standardOptions: [],
      users: [],
      depts: [],
      equipments: [],
      eqTypeOptions: undefined,
      deptOptions: [],
      transferProps: {
        key: "id",
        label: "name",
      },
      // 数据字典currentUser
      maintainTypeDictDatas: getDictDatas(DICT_TYPE.COMMON_TIME_TYPE),
      typeDictDatas: getDictDatas(DICT_TYPE.EMS_MAINTAINSTANDARD_ITEM_TYPE),
      booleanDictDatas: getDictDatas(DICT_TYPE.SYSTEM_BOOLEAN_TYPE),
      open: false,
      loading: false,
      currentUser: {},
    };
  },
  created() {
    this.getTreeselect();
    // 获得用户列表
    listSimpleUsers().then((response) => {
      this.users = response.data;
    });
    listDept().then((response) => {
      this.depts = response.data;
    });
    // 个人信息
    getUserProfile().then((response) => {
      this.currentUser = response.data;
    });
  },
  methods: {
    /** 提交按钮 */
    submitForm() {
      this.$refs["queryForm"].validate((valid) => {
        if (!valid) {
          return;
        }
        this.form.console.log(this.form);
        // 添加的提交
        // createMaintainTask(this.queryForm).then((response) => {
        //   this.$modal.msgSuccess("发起成功");
        //   this.$tab.closeOpenPage({
        //     path: "/maintenance/maintain/maintain-task",
        //   });
        // });
      });
    },
    /** 查询类别下拉树结构 + 岗位下拉 */
    getTreeselect() {
      listSimpleEqTypes().then((response) => {
        // 处理 storeOptions 参数
        this.eqTypeOptions = [];
        this.eqTypeOptions.push(...this.handleTree(response.data, "id"));
      });
      listSimpleDepts().then((response) => {
        this.deptOptions.push(...this.handleTree(response.data, "id"));
      });
      listSimpleEquipments().then((response) => {
        this.equipmentOptions = response.data;
      });
      listSimpleMaintainStandards().then((response) => {
        this.standardOptions = response.data;
      });
    },
    changeStandard(id) {
      this.loading = true;
      getMaintainStandard(id).then((response) => {
        this.form = response.data;
        this.open = true;
      });
      this.loading = false;
    },
    // 部门展示
    deptNameFormat(row, column) {
      if (!row.deptId) {
        return "未设置";
      }
      for (const dept of this.depts) {
        if (row.deptId === dept.id) {
          return dept.name;
        }
      }
      return "未知【" + row.deptId + "】";
    },
    deptNameFormat2(deptId) {
      if (!deptId) {
        return "未设置";
      }
      for (const dept of this.depts) {
        if (deptId === dept.id) {
          return dept.name;
        }
      }
      return "未知【" + deptId + "】";
    },
    eqNameFormat(equipment) {
      if (!equipment) {
        return "未设置";
      }
      for (const eq of this.equipmentOptions) {
        if (equipment === eq.id) {
          return eq.name;
        }
      }
      return "未知【" + equipment + "】";
    },
    typeNameFormat(type) {
      if (type === undefined) {
        return "未设置";
      }
      for (const eq of this.eqTypeOptions) {
        if (type === eq.id) {
          return eq.name;
        }
      }
      return "未知【" + type + "】";
    },
    changeUser(userId) {
      if (userId == this.currentUser.id) {
        this.taskVisable = true;
      } else this.taskVisable = false;
    },
  },
};
</script>

<style lang="scss">
.my-process-designer {
  height: calc(100vh - 200px);
}

.box-card {
  width: 100%;
  margin-bottom: 20px;
}
.el-row {
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-form-item {
  margin-bottom: 30px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>